<template>
  <div>
    <div v-if="!$cookies.get('homePassed')">
      <div class="words text-blue-900 dark:text-gray-100">
        {{ words[0] }}
      </div>
      <input
        v-if="!homePassed"
        v-model="homeReply"
        type="text"
        class="words text-blue-900 dark:text-gray-100 bg-transparent outline-none border-b-2"
        placeholder="What's the next ?"
        @keyup.enter="onInputText"
      />
    </div>

    <div v-else class="words text-blue-900 dark:text-gray-100">
      <div>
        {{ words[1] }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NcCompFunnyWords',
  props: {
    words: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      curIndex: 0,
      homeReply: '',
      homePassed: false,
      showSuccess: false,
    }
  },
  computed: {
    textSuccess() {
      return '确认过眼神，你不是一般的人！'
    },
  },
  methods: {
    onInputText() {
      if (this.homeReply === this.words[1] && !this.homePassed) {
        this.homePassed = true
        this.$cookies.set('homePassed', true)
        this.$message({
          message: this.textSuccess,
          type: 'success',
        })
      }
    },
  },
}
</script>

<style scoped>
.words {
  @apply font-sans text-3xl text-center mx-auto;
}
</style>
